<template>
  <div class="contact-container">
      <div class="item">
          <Icon type="github"/>
          <p>LPY-EDU</p>
      </div>
          <a href="mailto:2405723976@qq.com" class="item">
            <Icon type="mail"/>
            <p>2405723976@qq.com</p>
        </a>
        <a href="tencent://message/?Menu=yes&uin=2405723976&Service=300&sigT=45a1e5847943b64c6ff3990f8a9e644d2b31356cb0b4ac6b24663a3c8dd0f8aa12a595b1714f9d45" class="item">
          <div class="qrcode">
              <img src="" alt="">
          </div>
          <Icon type="qq"/>
          <p>2405723976</p>
      </a>
      <div class="item small">
          <div class="qrcode">
              <img src="" alt="">
          </div>
          <Icon type="weixin"/>
          <p>GeGeNBYa</p>
      </div>
  </div>
</template>

<script>
import Icon from '@/components/icon'
export default {
    components:{
        Icon,
    }
}
</script>

<style scoped lang="less">
@import "~@/styles/var.less";
    .contact-container{
        font-size:14px;
        color:@gray;
        color:#eee;
        margin:10px 0px 10px 7px;
        .item{
            &:hover{
                color:@primary;
                cursor:pointer;
            }
            &:hover .qrcode{
                transform:scale(1);
            }
            .qrcode{
                &::after{
                    position:absolute;
                    content:"";
                    width:10px;
                    height:10px;
                    background-color:#eee;
                    bottom:-15px;
                    left:50%;
                    transform:translateX(-50%) rotate(45deg);
                }
                position:absolute;
                bottom:40px;
                width:100px;
                height:100px;
                border:10px solid #eee;
                border-radius:7px;
                transform:scaleY(0); //元素沿Y轴折叠
                transition:0.5s;
                transform-origin:center bottom;
                img{
                    width:100%;
                    height:100%;
                }
            }
            position:relative;
            height:40px;
            align-items:center;
            display:flex;
            text-decoration:none;
            color:#eee;
            &.small{
                .icon-container{
                    font-size:30px;
                    margin-left:-3px;
                }
            }
            p{
                margin-left:7px;
            }
            .icon-container{
                font-size:25px;
            }
        }
    }
</style>